<template>
  <el-card class="left_container">
    <div v-html="html"></div>
  </el-card>
</template>

<script lang="ts">
import { defineComponent, ref, onMounted } from 'vue'
import showdown from 'showdown'
import * as readmeContent from './help.md'

export default defineComponent({
  name: 'Help',
  components: {},
  props: {},
  setup() {
    let html = ref('')
    onMounted(() => {
      const converter = new showdown.Converter()
      // const markdown = '# Markdown Title `showdown.js`'
      html.value = converter.makeHtml(readmeContent)
    })
    return {
      html
    }
  }
})
</script>

<style lang="scss" scoped>
.left_container {
  text-align: left;
  padding: 20px;
}
</style>
